<template>
  <div id="category">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: {
    xData: Array | Object, //时间戳
    roomData: Array, //带货直播间
    shopCount: Array, //实时直播在售商品数
    vistorCount: Array, //实时观看人数
    favoriteCount: Array, //实时带货直播间点赞数
    volume: Array, //实时直播预估销量
    amount: Array, //实时直播预估销售额
    lineY: Boolean,
    tooltipTime: Array,
  },
  data() {
    return {
      oldValue: false,
    };
  },
  watch: {
    lineY: {
      handler() {
        this.oldValue = this.lineY;
      },
      deep: true,
    },
    roomData: {
      handler() {
        this.drawChart01();
      },
      deep: true,
    },
    shopCount: {
      handler() {
        this.drawChart01();
      },
      deep: true,
    },
    vistorCount: {
      handler() {
        this.drawChart01();
      },
      deep: true,
    },
    favoriteCount: {
      handler() {
        this.drawChart01();
      },
      deep: true,
    },
    volume: {
      handler() {
        this.drawChart01();
      },
      deep: true,
    },
    amount: {
      handler() {
        this.drawChart01();
      },
      deep: true,
    },
  },
  mounted() {
    this.drawChart01();
  },
  methods: {
    drawChart01() {
      let colors = [
        "#ffc39b",
        "#f4c14b",
        "#fd7040",
        "#3ec0cc",
        "#4c94f6",
        "#ff9149",
      ];
      let that = this;
      let myChart1 = that.$echarts.init(that.$refs.chart01);
      let option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          formatter: function (params, index, i) {
            var result = "";
            var result1 = "";
            params.forEach((item) => {
              if (that.tooltipTime) {
                var date = that.tooltipTime[item.dataIndex]; //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                result1 = that.timestamp(date, "Y-M-D h:m:s");
              }
              result +=  item.marker + item.seriesName + "：" + that.format_num(item.value) + "</br>";
            });
            return result1 + "</br>" + result;
          },
        },
        grid: {
          left: "2%",
          right: "2%",
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: that.xData.data,
            axisLabel: {
              margin: 14,
              show: true,
              textStyle: {
                color: "#888",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#e5e5e5", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
          },
        ],
        yAxis: [
          // 去掉背景网格
          {
            splitLine: {
              show: false,
            },
            show: false,
          },
          {
            type: "value",
            name: "带货直播间",
            position: "right",
            show: false,
            axisLine: {
              lineStyle: {
                color: colors[0],
              },
            },

            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "实时直播在售商品数",
            position: "right",
            show: false,
            axisLine: {
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "实时观看人数",
            position: "right",
            show: false,
            offset: 100,
            axisLine: {
              lineStyle: {
                color: colors[2],
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "实时带货直播间点赞数",
            position: "right",
            show: false,
            axisLine: {
              lineStyle: {
                color: colors[3],
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "实时直播预估销量",
            position: "right",
            show: false,
            axisLine: {
              lineStyle: {
                color: colors[4],
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "实时直播预估销售额",
            position: "left",
            show: false,
            axisLine: {
              lineStyle: {
                color: colors[5],
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "带货直播间",
            type: "bar",
            barWidth: "3",
            yAxisIndex: 5,
            data: that.roomData,
          },
          {
            name: "实时直播在售商品数",
            type: "line",
            // areaStyle: {
            //   normal: {
            //     //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            //     color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //       {
            //         offset: 0,
            //         color: '#f4c14b'
            //       },
            //       {
            //         offset: 1,
            //         color: '#FAFAFB'
            //       }
            //     ])
            //   }
            // },
            smooth: true, //平滑曲线
            data: that.shopCount,
            yAxisIndex: 1,
          },
          {
            name: "实时观看人数",
            type: "line",
            smooth: true,
            yAxisIndex: 2,
            data: that.vistorCount,
          },
          {
            name: "实时带货直播间点赞数",
            type: "line",
            smooth: true,
            yAxisIndex: 3,
            data: that.favoriteCount,
          },
          {
            name: "实时直播预估销量",
            type: "line",
            smooth: true,
            yAxisIndex: 4,
            data: that.volume,
          },
          {
            name: "实时直播预估销售额",
            type: "line",
            smooth: true,
            data: that.amount,
          },
        ],
      };
      myChart1.clear();
      myChart1.setOption(option);
      myChart1.on("click", this.myChart1Nodeclick);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          myChart1.resize();
        });
      }, 200);
    },
    // 节点点击事件
    myChart1Nodeclick(param) {
      if (param.seriesName == "带货直播间") {
        this.roomData.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时直播在售商品数") {
        this.shopCount.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时观看人数") {
        this.vistorCount.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时带货直播间点赞数") {
        this.favoriteCount.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时直播预估销量") {
        this.volume.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时直播预估销售额") {
        this.amount.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
#category {
  width: 100%;
  height: 100%;
  .chart01 {
    width: 100%;
    height: 490px;
    overflow: hidden;
    clear: both;
  }
}
</style>